<template>
  <div class="an-content">
    <el-row :gutter="40" type="flex" justify="center">
      <!-- 左侧公告列表 -->
      <el-col :span="6">
        <div
          class="left-content"
          v-infinite-scroll="handleRequest"
          style="overflow: auto"
        >
          <!-- 每一项的公告 -->
          <div
            class="left-item"
            :class="chooseId == item.id ? 'choose-item' : ''"
            v-for="(item, index) in noticeList"
            :key="index"
            @click="chooseItem(item, index)"
          >
            <div class="hover-content">
              <h1 class="title">标题：{{ item.title }}</h1>
              <p class="summary">摘要：{{ item.summary }}</p>
            </div>
            <p class="tag-name">#{{ item.tag_name }}#</p>
            <p class="date">时间：{{ item.created_at }}</p>
          </div>
        </div>
      
      </el-col>
      <el-col :span="16"
        ><div class="right-content">
          <!-- 每一项的公告 -->
          <div class="detail">
            <h1 class="title">{{ showItem.title }}</h1>
            <div class="date-author">
              <span>时间：{{ showItem.created_at }}</span>
              <span class="author">作者：{{ showItem.author }}</span>
              <span style="margin-left: 24px" class="tag-name"
                >#{{ showItem.tag_name }}#</span
              >
            </div>

            <div class="summary">
              摘要：

              <span class="s-s"> {{ showItem.summary }}</span>
            </div>
            <div class="content" v-html="showItem.content"></div>
            <div style="text-align: right"></div>
          </div></div
      ></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,

      lists: [],
      // 默认显示第几页
      currentPage: 0,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      total: 0,
      // 个数选择器（可修改）
      pageSizes: [10, 30, 50],
      // 默认每页显示的条数（可修改）
      pageSize: 100,
      st: 0,
      formData: {},
      showItem: {},
      noticeList: [],
      chooseId: "",
      chooseIndex: "",
      id: "",
    };
  },
  mounted() {
    const that = this;
    // that.handleRequest();
    let { id, index } = that.$route.query;
    that.chooseId = id == 0 ? "" : id;
    that.chooseIndex = index == 0 ? "0" : index;
    console.log("iddd", id, index);
    that.id = id;
    that.setRead(that.id);
    // that.$util.autoHeight(that, that.$refs.table.$el);
  },
  methods: {
    /**
     * 设为已读
     */
    async setRead() {
      const { result } = await this.$.common.setRead({
        notice_id: this.chooseId,
      });
    },
    // 查看详情
    toDetail() {
      this.tipsDialog = false;
      let url = "/announcement?id=" + this.promptObj.id + "&index=0";
      window.open(window.location.origin + "/#" + url, "_blank");
    },
    // 选中读取
    chooseItem(item, index) {
      this.showItem = item;
      this.chooseId = item.id;
      let url = "/announcement?id=" + this.chooseId + "&index=" + index;
      window.open(window.location.origin + "/#" + url, "_blank");
      // this.setRead();
      console.log("this.showItem", this.showItem, this.chooseId);
    },
    /**
     * 获取列表
     */
    async handleRequest() {
      const that = this;
      const { currentPage, pageSize, formData } = that;
      that.currentPage++;
      if (that.total <= this.noticeList.length && that.total != 0) {
        this.$message('已无更多公告');
        return;
      }
      console.log("this.", that.currentPage);
      // return
      // console.log(`handleRequest 第${currentPage}页`);
      let o = {
        page_size: pageSize,
        page: that.currentPage,
      };

      that.$util.ext(that.formData, o);

      try {
        that.loading = true;
        const { result } = await that.$.common.noticeIndex(that.formData);
        console.log("res", result);
        that.total = result.pagination.total_count;

        // result.list.map((item) => {
        //   item.isOK = false;
        //   if (!item.length) return;
        //   that.in_charge_name.push({ name: item.in_charge_name });
        // });
        console.log("res", result);
        that.noticeList = that.noticeList.concat(result.list);
        that.showItem = result.list[that.chooseIndex];
        that.loading = false;
      } catch (e) {
        that.loading = false;
      }
    },
    /**
     * 弹框的行更改
     */
    rowChange(e) {
      console.log(e);
    },
    sizeChange(e) {
      const that = this;
      // that.currentPage = 1;
      // that.pageSize = e;
      // that.handleRequest();
    },
    currentChange(e) {
      // this.currentPage = e;
      // this.handleRequest();
    },
  },
};
</script>

<style lang="scss" scoped>
.an-content {
  width: 1130px;
  min-width: 1130px;
  margin: 40px auto 0;
  padding: 0 48px;
  .tag-name {
    word-break: break-all;
    color: #1975f6;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 8px;
  }
  .left-content {
    width: 100%;
    max-height: 800px;
    border-radius: 4px;
    .left-item {
      padding: 12px 10px;
      border-bottom: 1px solid #ebf1f7;
      cursor: pointer;
      .title {
        word-break: break-all;
        font-size: 16px;
        line-height: 22px;
      }
      .hover-content {
        color: #222;
      }
      .hover-content:hover {
        color: #f04142 !important;
      }
      .summary {
        word-break: break-all;
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 8px;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .date {
        text-align: right;
        font-size: 14px;
        line-height: 20px;
        color: #999;
      }
    }
    .left-item:last-child {
      border-bottom: none;
    }

    .choose-item {
      background: #ebf1f7;
    }
  }
  .right-content {
    width: 100%;
    padding: 20px;

    border-radius: 4px;
    .detail {
      font-size: 14px;
      .title {
        text-align: center;
        font-size: 37px;
        font-weight: 600;
        line-height: 56px;
        color: #000;
      }
      .date-author {
        margin: 16px 0 36px;
        font-size: 14px;
        line-height: 20px;
        color: #707070;
        .author {
          margin-left: 24px;
        }
      }
      .summary {
        word-break: break-all;
        color: #000;
        font-weight: 600;
        font-size: 18px;
        .s-s {
          color: #333333;
          font-weight: 400;
          padding-top: 44px;
        }
      }
      .content {
        word-break: break-all;
        color: #222;
        font-size: 18px;
        padding: 20px 0;
      }
    }
  }
  .an-page-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>

<style scoped>
.common-pdf {
  height: 100%;
  width: 100%;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>